@charset "utf-8";
@import "option_common/option_common";
.rock{
//    display: none;
      position: absolute;
     left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .rock_back{
         width: 100%;
        height: 100%;
        img{
            width: 100%;
             height: 100%;
        }
    }
    .rock_lamplight{
         position: absolute;
        top: r(0px);
        left: r(0px);
        img{
            width: 100%;
        }
    }
     .rock_character{
         position: absolute;
        top: r(200px);
        right: r(-220px);
        z-index: 1;
         animation: character .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
     .rock_figure{
         position: absolute;
        top: r(300px);
        left: r(0px);
        animation: figure1 .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 60%;
        }
    }
     .rock_figure2{
         position: absolute;
        top: r(310px);
        right: r(-295px);
          animation: figure2 .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 55%;
        }
    }
     .rock_grid{
         position: absolute;
        top: r(520px);
        left: r(0px);
        img{
            width: 100%;
        }
    }
     .rock_man{
         position: absolute;
        top: r(136px);
        right: r(-310px);
          animation: man .5s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
     .rock_pi{
         position: absolute;
        bottom: r(430px);
        left: r(238px);
        animation: pi 2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 65%;
        }
    }
     .rock_wow{
         position: absolute;
        top: r(278px);
        left: r(0px);
         animation: wow .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 45%;
        }
    }
}
@keyframes pi{
    0%{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translateY(50px);
    }
}
@keyframes wow{
    0%{
//      opacity: 0;
//  transform: translateX(30px);
    }
    to{
//      opacity: 1;
        transform: translateY(30px);
    }
}
@keyframes figure1{
    0%{
        
    }
    to{
        transform: translateY(20px);
    }
}
@keyframes figure2{
    0%{
        
    }
    to{
        transform: translateX(-20px);
    }
}
@keyframes man{
    0%{
        
    }
    to{
        transform: rotateZ(5deg);
    }
}
@keyframes character{
    0%{
        
    }
    to{
        transform: translateX(-20px);
    }
}
